import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {Slider, Radio} from 'antd';
import ColorPicker from '../../common/colorPicker/index';
import SlideInput from '../../common/SlideInput/index';

const RadioGroup = Radio.Group;

class HomeCardListOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {}
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data
        };

    }

    render() {
        var {style, dataset, vipStyle, couponStyle} = this.state.data;
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);
        var vipBgColor = vipStyle ? vipStyle.backgroundColor : '#bf5dfe';
        var couponBgColor = couponStyle ? couponStyle.backgroundColor : '#5f59e5';
        var showTy = dataset.showTy || '';

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">展示项</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup onChange={(e) => {
                            this.$dataChange('showTy', e.target.value, 'dataset');
                        }} defaultValue={showTy}>
                            <Radio value={''}>都展示</Radio>
                            <Radio value={'vip'}>会员卡</Radio>
                            <Radio value={'coupon'}>优惠券</Radio>
                        </RadioGroup>
                    </div>
                </div>

                {
                    (!showTy || showTy == 'vip') ?
                        (
                            <div className="optsPanel__item">
                                <label className="optsPanel__item__hd">会员卡背景色</label>
                                <div className="optsPanel__item__bd">
                                    <ColorPicker color={vipBgColor} onChangeComplete={(color, rgba) => {
                                        this.$dataChange('backgroundColor', rgba, 'vipStyle');
                                    }}/>
                                </div>
                            </div>

                        )
                        : null
                }

                {
                    (!showTy || showTy == 'coupon') ?
                        (
                            <div className="optsPanel__item">
                                <label className="optsPanel__item__hd">优惠券背景色</label>
                                <div className="optsPanel__item__bd">
                                    <ColorPicker color={couponBgColor} onChangeComplete={(color, rgba) => {
                                        this.$dataChange('backgroundColor', rgba, 'couponStyle');
                                    }}/>
                                </div>
                            </div>

                        )
                        : null
                }

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <div className="optsPanel__item__bd">
                        <a href="/admin/Coupon/listPage" target="_blank"
                           className="ant-btn-dataMng ant-btn ant-btn-primary ant-btn-lg">优惠券管理</a>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <div className="optsPanel__item__bd">
                        <a href="/admin/Card/listPage" target="_blank"
                           className="ant-btn-dataMng ant-btn ant-btn-primary ant-btn-lg">会员卡管理</a>
                    </div>
                </div>

            </div>
        );
    }
}

export default HomeCardListOpts;
